import React ,{Component} from "react";
import { connect } from "react-redux";
import { actionCreators } from "../store";
import {Link} from 'react-router-dom';
import { ListItem ,ListInfo,LoadMore} from "../style";


class List extends Component{
    render(){
        const {list,getMoreList,page} = this.props;
        return (
            <div>
                { list.map((item,index)=>{
                    return(
                        <Link key={index} to={'/detail/'+item.get('id')}>
                            <ListItem>
                                <img alt="" className='pic'></img>
                                <ListInfo>
                                    <h3 className='title'>{item.get('title')}</h3>
                                    <p className='desc'>{item.get('desc')}</p>
                                </ListInfo>
                            </ListItem>   
                        </Link>                         
                    )
                })}
                <LoadMore onClick={()=>{getMoreList(page)}}>加载更多</LoadMore>
            </div>
        )
    }
}

const mapStateToProps = (state)=>({
    list: state.getIn(['home','articleList']),
    page: state.getIn(['home','articlePage'])
})

const mapDispatchToProps= (dispatch)=>({
    getMoreList(page){
        dispatch(actionCreators.getMoreList(page))
    }
})

export default connect(mapStateToProps,mapDispatchToProps)(List);